<template>
    <div>
        <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="24" :offset="0">
                <h1>用户注册</h1>
            </el-col>
        </el-row>

        <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8" :offset="0"></el-col>
            <el-col :span="8" :offset="0">
                <avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>
                <a href="/login">已有账号，去登录</a>
            </el-col>
            <el-col :span="8" :offset="0"></el-col>
        </el-row>


    </div>
</template>
<script>
export default {
    data() {
        return {
            form:{},
            option: {
                size: 'medium',
                column: [
                    {
                        label: '用户名',
                        span: 24,
                        prop: 'username',
                        type: 'input'
                    },
                    {
                        span: 24,
                        type: 'password',
                        showPassword: true,
                        label: '密码',
                        prop: 'password'
                    }
                ]
            }

        }
    },
    methods: {
        handleSubmit(form,done) {
            this.$ajax.post('/user/register', form).then(res => {
                if(res.code===200){
                    this.$message.success('注册成功！');
                    done();
                }else{
                    this.$message.error(res.msg);
                }
            })
        }
    }
}
</script>